<template>
  <div class="detail">
    <div class="container">
      <!-- <div class="logo"> -->
      <el-avatar :size="150" :src="detail.circleUrl" />
      <ul class="right">
        <li class="right-item">
          <span class="title">{{ studentInfo?.stuName }}</span>
          <!-- =================================================预警================================================= -->
          <el-tag effect="dark" size="large"> 在校 </el-tag>
          <el-tag style="background-color: red;" effect="dark" size="large" v-if="studentInfo?.bedWarn === '归寝预警'">
            归寝预警
          </el-tag>
          <el-tag style="background-color: red;" effect="dark" size="large" v-if="studentInfo?.studyWarn === '学业预警'">
            学业预警
          </el-tag>

          <!-- =================================================预警================================================= -->
          <!-- <el-tag v-for="item in username.statusList" :key="item.label" :type="item.type" effect="dark" size="large">
            {{ item.label }}
          </el-tag> -->
        </li>
        <li class="right-item">
          <div class="a-item"><span>学院：</span><span>{{ studentInfo?.institute }}</span></div>
          <div class="a-item"><span>班级：</span><span>{{ studentInfo?.major + studentInfo?.classNum }}</span></div>
          <div class="a-item"><span>学号：</span><span>{{ studentInfo?.stuId }}</span></div>
          <div class="a-item"><span>电话：</span><span>{{ studentInfo?.mobile }}</span></div>
        </li>
        <li class="right-item">
          <span>学籍状态：</span>
          <el-tag type="warning" size="large" effect="dark"> {{ studentInfo?.schooStatus ? "保留学籍" : "在籍" }}</el-tag>
        </li>
        <li class="right-item">
          <div class="a-item"><span>辅导员：</span><span>{{ studentInfo?.counsellor }}</span></div>
          <div class="a-item"><span>班主任：</span><span>{{ studentInfo?.classTeacher }}</span></div>
        </li>
      </ul>
    </div>
    <!-- </div> -->
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, onUpdated } from "vue"
const props = defineProps({
  studentInfo: {
    type: Object,
    require: true,
  },
})
// assetsUrl路径
const assetsUrl = ref('../../../src/assets/')

onMounted(() => {
  console.log("123===>", props.studentInfo)
})

onUpdated(() => {
  detail.circleUrl = `${assetsUrl.value}${props.studentInfo.stuId}.png`
})
const detail = reactive({
  circleUrl: ''
})

const username = reactive({
  name: 'zhangsan',
  statusList: [
    { type: 'info', label: '在校' },
    { type: 'danger', label: '归寝预警' },
    { type: 'danger', label: '学业预警' },
  ]
})

// const otherInfo = reactive({
//   college: '计算机学院',
//   class: '通信工程3班',
//   stuNum: 123123,
//   phone: 12333123,
//   schStatus: '保留学籍',
//   teacher: 'lisi',
//   headTeacher: 'wangwu',
// })

</script>
<style lang="scss" scoped>
.detail {
  height: 200px;
  width: 100%;
  background-color: #031F4F;
  background-image: url('../../assets/bg2.jpg');
  /* 添加背景图片 */
  background-position: center;
  /* 图片居中 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-size: cover;
  /* 拉伸填充 */

  .container {
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;


    .right {
      height: 100%;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 18px 0;

      &-item {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #fff;

        .title {
          margin-right: 30px;
        }

        .el-tag {
          margin-right: 30px;
          font-size: 14px;
        }

        .a-item {
          margin-right: 50px;
        }
      }
    }
  }
}
</style>
